@extends('layouts.master3')
<?php
use App\Utils;
?>
@section('title')
{{"千里码-技能树"}}
@stop
@section("css")
<link rel="stylesheet" type="text/css" href="/css/tree.css">
<link rel="stylesheet" href="/css/index.css">
@endsection

@section('content')
<div class="contain main">

    <!-- 左边D3-->
    <div class="task_left pull-left">
            <div class="d3">
@if($solve[1]==2)
                    <div class="popover fade right in" role="tooltip" id="popover954159" style="top: 190px;left: 534px;display: block;">
                        <div class="arrow" style="top: 50%;"></div>
                      <!--  <h3 class="popover-title">Popover title</h3> -->
                        <div class="popover-content">别BB，点我!</div>
                    </div>
@endif
            </div>
        
    </div>
</div>
<!-- /.container -->
@endsection
@section('js')
<script>
    window['nodes']=[
<?php
foreach($tasks as $task)
{
if($task->x!=0)
{
   $str='fixed: true,x: '.$task->x.',y: '.$task->y."";
}
else $str="";
if($solve[$task->id]==1)
echo "{id:".$task->id.",name: '".$task->title."', reflexive: false,".$str."},\n";
else if($solve[$task->id]==2)
echo "{id:".$task->id.",name: '".$task->title."', reflexive: true,".$str."},\n";
else 
echo "{id:-1,name: 'none', reflexive: true,fixed: true,x: -100,y: -100},\n";
}
?>

    ];
    window['links']=[
<?php
foreach($links as $link)
{
     if($solve[$link->first]!=1)continue;
     echo "{source: nodes[".($link->first-1)."], target: nodes[".($link->second-1)."], left: false, right: true },\n";
}
?>

    ];

</script>
<script src="/js/d3.js"></script>
<script src="/js/tree1.js"></script>
<script src="/js/local.min.js"></script>
<script src="/js/jquery.mCustomScrollbar.js"></script>
<script src="/js/jquery.mousewheel.min.js"></script>
<script>
     $(function(){
        //right_p is open?
        var flag=false;
        $("body").addClass("html-margin");
        $(".right_p").click(function(e){
            e.stopPropagation();
            var _this=this;
            $(_this).children(".right_menu").fadeOut(200);
            $(_this).removeClass("active").animate({right:"0"},500,function(){
                flag=true;
            });

        });
        $(document).click(function(){
            if(!$(".right_p").hasClass("active")){
                $(".right_menu").parent().animate({right:"-300px"},500,function(){
                    $(".right_menu").fadeIn(200);
                    flag=false;
                    $(this).removeAttr("style");
                });
                $(".right_p").addClass("active");
            }
        });

        $(".un_task").mCustomScrollbar({
            scrollInertia:400
        }).mouseenter(function () {
            document.body.onmousewheel = function () {
                return false;
            }
        }).mouseleave(function () {
            document.body.onmousewheel = function () {
                return;
            }
        });
        //鼠标进入的时候隐藏外面的滚动条,然后对html设置滚动条宽度的margin-right,这样滚动条消失后就不会有明显的宽度变化
        // $(".dd3").mCustomScrollbar({
        //     scrollInertia:400
        // }).mouseenter(function(){
        //     $(".dd3 .mCSB_scrollTools").css("opacity","0.75");
        //     var H=$("html");
        //     var w1 = $(window).width();
        //     H.addClass('lock-test');
        //     var w2 = $(window).width();
        //     H.removeClass('lock-test');
        //     $("#scroll-width").remove();
        //     $("<style type='text/css' id='scroll-width'>.html-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");
        //     $("html").toggleClass("alpha");
        //     $(".right_menu").css("margin-right",w2-w1+"px");
        //     if(flag){
        //         $(".task_right").css("margin-right",w2-w1+"px");
        //         console.log(111);
        //     }
        // }).mouseleave(function(){
        //     $("html").toggleClass("alpha");
        //     $("#scroll-width").html('.html-margin{margin-right:0px;}')
        //     $(".right_menu").css("margin-right","0px");
        //     if(!$("html").hasClass("alpha")){
        //         $(".task_right").css("margin-right","0px");
        //     }
        //     $(".dd3 .mCSB_scrollTools").css("opacity","0");
        // });


    });

    //拖动，以后可能用得到
    //  var d=$("#dd");
    //  var divx,divy;
    //  d.mousedown(function(e)
    //  {
    //      var _x= d.position().left;
    //      var _y= d.position().top;
    //      d.css("cursor","pointer");//改变鼠标指针的形状
    //     var ov=e||event;
    //     divx=ov.clientX;
    //     divy=ov.clientY;//当前点击位置
    //     $(document).bind("mousemove",function(e){
    //         var ov=e||event;
    //         d.css("left",_x+ov.clientX-divx+"px");
    //         d.css("top",_y+ov.clientY-divy+"px");//移动鼠标的偏移量
    //     })
    //
    //     $(document).mouseup(function()
    //     {
    //      $(this).unbind("mousemove");
    //         d.css("cursor","default");
    //     })
    //  })
</script>
@endsection
